import React, { Component,useEffect,useState } from 'react';
import {Modal, Radio, Table, Tabs, Divider, Input, Row, Space, Button, message} from 'antd';
import {getProcessInstancesByUserId,getMyTask,getMyFinishTask} from "../api/workflow";
import ViewProcInst from './ViewProcInst'
export default class ProcessManage extends Component {
    state = {
// 写在状态中,ajax请求可以更新
        data: null
    }

    componentDidMount() {
    }

    render() {
        return (
            <>
                <ProcessManagaeType/>
            </>
        )
    }
}

const ProcessManagaeType = () => {
    const [value, setValue] = useState(1);

    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    const { TabPane } = Tabs;
    const callback=(key)=> {
        console.log(key);
    }
    return (
        <>
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="我的申请" key="1">
                    <>{StartedPorcessByMe()}</>

                </TabPane>
                <TabPane tab="待办事项" key="2">
                    {MyTask()}
                </TabPane>
                <TabPane tab="已办事项" key="3">
                    {MyFinishTask()}
                </TabPane>
            </Tabs>




        {/*// <Radio.Group onChange={onChange} value={value}>*/}
        {/*//     <Radio value={1}>我的申请</Radio>*/}
        {/*//     <Radio value={2}>待办事项</Radio>*/}
        {/*//     <Radio value={3}>已办事项</Radio>*/}
        {/*// </Radio.Group>*/}

</>
    );
};

//我启动的流程
 const StartedPorcessByMe =() =>{
    const [myProcess, setMyProcess] = useState([]); //流程数据
    const [showProc, setShowProc] = useState(false); //流程数据
     const [selectPorcInstId, setSelectPorcInstId] = useState(-1); //选中的流程id
     const [selectPorcDefId, setSelectPorcDefId] = useState(-1); //选中的流程id
    useEffect(()=>{
        getProcessInstancesByUserId().then(
            (res) => {
                setMyProcess(res.data)
            },
            (error) => {
                console.log("get response failed!");
            }
        );

    },[])
    //
    const columns = [

        {
            title: '名称',
            dataIndex: 'processDefinitionName',
            key: 'processDefinitionName',
        },

        {
            title: '业务健',
            dataIndex: 'businessKey',
            key: 'businessKey',
        },
    ];

    const  rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            //  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        onSelect: (record, selected, selectedRows) => {
            if(selected){
                //selectedUserId: record.userid,
                setSelectPorcInstId(record.id);
                setSelectPorcDefId(record.processDefinitionId)
            }else{

            }
        },
    };

     //show porcess inst
     const showProcInst=()=>{
         if (selectPorcInstId==-1){
             message.info("请选择一个流程实例")
             return;
         }

         setShowProc(true)
     }

    //取消流程
    const cancelModal=()=>{

        setShowProc(false)

    }






    return (
        <>
            <Space><Button onClick={showProcInst}>查看</Button></Space>

            <Table
                rowSelection={{
                    type: "radio",
                    ...rowSelection,
                }}
                rowKey="id"
                columns={columns} dataSource={myProcess}/>

            <Modal
                width={740}
                title="查看流程状态"
                visible={showProc}
                //confirmLoading={this.props.confirmLoading}
                //onOk={this.onOk}
                //okText='保存'
                cancelText='返回'
                onCancel={cancelModal}
                footer={null}
            >
                <ViewProcInst
                    procId={selectPorcDefId}
                    procInstId={selectPorcInstId}
                />
            </Modal>



        </>
    );
};


//我的任务
const MyTask =() =>{
    const [myTasks, setMyTasks] = React.useState([]); //流程数据
    useEffect(()=>{
        getMyTask().then(
            (res) => {
                setMyTasks(res.data)
            },
            (error) => {
                console.log("get response failed!");
            }
        );

    },[])
    //
    const columns = [
        {
            title: '流程名称',
            dataIndex: 'processDefinitionName',
            key: 'processDefinitionName',
        },

        {
            title: '任务名称',
            dataIndex: 'name',
            key: 'name',
        },
    ];

    const  rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            //  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        onSelect: (record, selected, selectedRows) => {
            if(selected){

            }else{

            }
        },
    };

    return (
        <>
            <Table
                rowSelection={{
                    type: "radio",
                    ...rowSelection,
                }}
                rowKey="id"
                columns={columns} dataSource={myTasks}/>
        </>
    );
};


//finsh task
const MyFinishTask =() =>{
    const [myFinishTask, setMyFinishTask] = useState([]); //我完成的任务
    const [show, setShow] = useState(false); //流程数据
    const [selectedTaskId, setSelectedTaskId] = useState(-1); //选中的流程id
    const [selectPorcDefId, setSelectPorcDefId] = useState(-1); //选中的流程id
    useEffect(()=>{
        getMyFinishTask().then(
            (res) => {
                setMyFinishTask(res.data)
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    },[])
    //
    const columns = [

        {
            title: '流程名称',
            dataIndex: 'procDefName',
            key: 'procDefName',
        },

        {
            title: '任务健',
            dataIndex: 'taskDefinitionKey',
            key: 'taskDefinitionKey',
        },
        {
            title: '任务名称',
            dataIndex: 'name',
            key: 'name',
        },
    ];

    const  rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            //  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        onSelect: (record, selected, selectedRows) => {
            if(selected){
                setSelectedTaskId(record.id);
            }else{

            }
        },
    };

    //show porcess inst
    const showTask=()=>{
        if (selectedTaskId==-1){
            message.info("请选择一个条目")
            return;
        }

        setShow(true)
    }

    //取消流程
    const cancelModal=()=>{
        setShow(false)
    }



    return (
        <>
            <Space><Button onClick={showTask}>查看</Button></Space>

            <Table
                rowSelection={{
                    type: "radio",
                    ...rowSelection,
                }}
                rowKey="id"
                columns={columns} dataSource={myFinishTask}/>

            <Modal
                width={740}
                title="查看"
                visible={show}
                //confirmLoading={this.props.confirmLoading}
                //onOk={this.onOk}
                //okText='保存'
                cancelText='返回'
                onCancel={cancelModal}
                footer={null}
            >
             <h1>Task......</h1>
            </Modal>
        </>
    );
};
